<template>
    <div id="" class="">
        <Modal v-model="modal" title="字典项管理" width="1200" @on-ok="ok" @on-cancel="cancel">
            <Form ref="formValidate" :label-width="85" inline>
                <FormItem label="字典值" style="width:400px">
                    <Input v-model="value" placeholder="字典值"></Input>
                </FormItem>
                <FormItem label="字典标签" style="width:400px">
                    <Input v-model="label" placeholder="字典标签"></Input>
                </FormItem>
                <FormItem style="width:300px">
                    <Button style="margin-left:75px" type="primary" @click="seach">查询</Button>
                    <Button style="margin-left:10px" @click="ResetTable()">重置</Button>
                </FormItem>
                <Button style="margin-bottom:10px" type="primary" @click="add">新增</Button>

            </Form>
            <Table row-key="id" :update-show-children="true" :columns="columnsTable" :data="list" border style="width: 100%;">
                <template #action="{ row, index }">
                    <Button style="margin-right:20px" type="primary" size="small" @click="edit(row)">修改</Button>
                    <Button type="error" size="small" @click="remove(row,index)">删除</Button>
                </template>
            </Table>
        </Modal>
        <Modal v-model="modalShow" width="1200" :mask-closable="false" :title="modalTitle">
            <components v-if="modalShow" :is="comps" ref="coms" :dictTypeId="passdictTypeId" />
            <div slot="footer">
                <Button type="text" @click="cancel">取消</Button>
                <Button type="primary" @click="ok">确定</Button>
            </div>
        </Modal>
        <RemoveForm ref="removeMoal" :title="'确认删除吗'" :content="'确认删除该条数据？'" :icon="'md-help-circle'" :top="'150px'" :iconColor="'#ec9c1a'" @onRemove="srueRemove" />
    </div>
</template>
<script>
import { columns } from './dictionaryAdmin_tableConfig'
import addOrUpdata from "./dictionaryAdmin_addOrUpdata.vue";
import RemoveForm from '@/components/modules/removeModal/index.vue'
export default {
    name: '',
    props: [''],
    data() {
        return {
            list: [],
            value: '',
            label: '',
            columnsTable: columns,
            modal: false,
            passdictTypeId: '',
            comps: addOrUpdata,
            modalShow: false,
            modalTitle: '',
            removeList: []
        };
    },
    components: { RemoveForm },
    computed: {},
    beforeMount() { },
    mounted() {

    },
    methods: {
        seach() {
            this.onPage(null)
        },
        add() {
            this.modalShow = true
            this.modalTitle = '新增'
        },
        edit(row) {
            this.modalShow = true
            this.modalTitle = '编辑'
            this.$nextTick(() => {
                this.$refs.coms.setData(row)
            })
        },
        remove(row) {
            if (row.children.length > 0) {
                this.$Message.info('先删除子节点')
                return false
            }
            this.removeList.push(row.id)
            this.removeContent = '确认删除该条数据？'
            this.removeTitle = '确认删除吗'
            this.$refs.removeMoal.onShow(true, this.removeList);
        },
        srueRemove(deleteData) {
            this.$http.$post('DeleteDictionaryData', { data: deleteData }).then(res => {
                if (res.code == 200) {
                    this.$Message.success('删除成功');
                    this.seach()
                    return
                }
                this.$Message.error(res.msg);
            })
        },
        ok() {
            this.$refs.coms.getForm((formRes) => {
                this.cancel()
                this.seach()
            })
        },
        cancel() {
            this.value = '';
            this.label = ''
            this.modalShow = false
            this.modalTitle = ''
        },
        onPage(row) {
            if (row) {
                this.passdictTypeId = row.id
            }
            this.modal = true
            this.$http.$get('DictionaryTypedataTree', { params: { dictTypeId: this.passdictTypeId, value: this.value, label: this.label } }).then(res => {
                if (res.code == 200) {
                    this.list = res.data
                    return
                }
                this.$Message.error(res.msg);
            })
        },
        ResetTable() {
            this.value = '';
            this.label = ''
            this.seach()
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
</style>